<template>
  <div class="secret-wrap">
    <div class="secret-box">
      <span class="title">问题1:</span>
      <div class="secret-con">
        <div class="problem-box" @click="problem">您最喜欢的城市？</div>
        <img src="./pull.png" class="pull"/>
      </div>
    </div>

    <div class="secret-box distance">
      <span class="title">答案1:</span>
      <input class="secret-con tip" placeholder="请设置问题答案"/>
    </div>

    <div class="secret-box">
      <span class="title">问题2:</span>
      <div class="secret-con">
        <div class="problem-box" @click="problem">您最喜欢的城市？</div>
        <img src="./pull.png" class="pull"/>
      </div>
    </div>

    <div class="secret-box distance">
      <span class="title">答案2:</span>
      <input class="secret-con tip" placeholder="请设置问题答案"/>
    </div>

    <div class="btn-box">
      <button type="button" class="btn" @click="confirm">保存</button>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../common/js/env"

  export default {
    data() {
      return {
        answer1: "",
        problemList: [
          {
            key: 1,
            value: "您最喜欢的城市？",
          },
          {
            key: 2,
            value: "您最看爱看的电影或电视剧？",
          },
          {
            key: 3,
            value: "您最喜欢的书？",
          },
          {
            key: 4,
            value: "您的曾用名是什么？",
          },
          {
            key: 5,
            value: "您伴侣的姓名是什么？",
          },
          {
            key: 6,
            value: "您孩子的姓名是什么？",
          },
        ]
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
    },
    methods: {
      problem() {//显示问题列表

      },
      confirm() {//保存

      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .secret-wrap
    wh(100%, 100%)
    overflow: hidden
    .secret-box
      display: flex
      align-items: center
      margin: 0 auto
      wh(92.53%, 1.12rem)
      margin-top: 0.8rem
      .title
        margin-right: 0.587rem
        size-color(0.427rem, rgba(68, 68, 68, 1))
      .secret-con
        display flex
        align-items: center
        flex: 1
        height: 1.12rem
        border: 0.013rem solid rgba(146, 146, 146, 1)
        .problem-box
          margin-left: 0.333rem
          size-color(0.427rem, rgba(68, 68, 68, 1))
        .pull
          margin-left: auto
          margin-right: 0.333rem
          wh(0.4rem, 0.4rem)
      .tip
        padding-left: 0.333rem
        size-color(0.427rem, rgba(68, 68, 68, 1))
    .distance
      margin-top: 0.32rem
      margin-bottom: 0.8rem
    .btn-box
      fj(center, center)
      position: fixed
      bottom: 0.48rem
      wh(100%, 1.333rem)
      border-radius(0.107rem)
      .btn
        wh(92.53%, 1.333rem)
        background: rgba(60, 175, 255, 1)
        border-radius(0.107rem)
        size-color(0.48rem, rgba(255, 255, 255, 1))
</style>
